<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!--https://github.com/thymeleaf/thymeleaf-extras-springsecurity-->
<head th:lang="zh">
    <title th:text="${title}">Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
</head>

<body>
<div class="container">

    <h1 th:text="${title}"></h1>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title" th:text="'welcome:'+ ${message}+'!'">访问Model</h3>
        </div>
        <div class="panel-body">
            <span th:text="${#dates.format(date)}"></span>
        </div>
        <form th:action="@{/logout}" method="post">
            <input type="submit" value="Sign Out"/>
        </form>
    </div>

    <div sec:authorize="isAuthenticated()" th:if="${principal}" th:object="${principal}">
        <p>已有用户登录</p>
        <p>登录的用户为: <span sec:authentication="name"></span></p>
        <p>用户权限为: <span th:text="*{userAuthentication.authorities}"></span></p>

    </div>
    <div sec:authorize="isAnonymous()">
        <p>未有用户登录</p>
    </div>
    <div sec:authorize="hasRole('ADMIN')">
        我是管理员
    </div>
    <p>登录的用户为: <span sec:authentication="username"></span></p>


    <div sec:authorize="isAuthenticated()">
        Hello <span sec:authentication="name">isAuthenticated</span>
    </div>
    <div sec:authorize="isRememberMe()">
        Hello<span sec:authentication="name">isRememberMe</span>
    </div>
    <div sec:authorize-url="/admin">
        <br/>
        <a th:href="@{/home.html}">authorize-url</a>
    </div>


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">列表</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="person:${peopleList}">
                    <span th:text="${person.name}"></span>
                    <span th:text="${person.age}"></span>
                    <br/>
                    <button class="btn btn-primary" th:onclick="'getName(\''+${person.name}+${person.age}+'\');'">
                        console.log(name)
                        console.log(age)
                    </button>
                </li>
            </ul>
        </div>

    </div>

    <!--Thymeleaf支持>,<,>=,<=,==,!=作为比较条件，同时也支持将SpringEL表达式用于条件中-->
    <div th:if="${not #lists.isEmpty(modelList)}">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">列表</h3>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item" th:each="model:${modelList}">
                        <span th:text="${model.name}"></span>
                        <span th:text="${model.age}"></span>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <ul class="list-group">

        <li class="list-group-item">
            <span class="badge">dddd</span>
            Hello Li
        </li>

        <li class="list-group-item">
            <span>222</span>
            Hello Li222
        </li>
    </ul>


    <div class="list-group">
        <a href="#" class="list-group-item active">1111</a>
        <a href="#" class="list-group-item ">
            <h4 class="list-group-item-heading">
                List group item heading
            </h4>
            <p class="list-group-item-text">
                list-group-item-text
            </p>
        </a>
        <a href="#" class="list-group-item ">3333</a>
        <a href="#" class="list-group-item ">4444</a>
    </div>


</div>
</body>
<script th:src="@{js/jquery-3.2.1.min.js}" src="../static/js/jquery-3.2.1.min.js"></script>
<script th:inline="javascript">
    var single = [[${singlePerson}]];
    console.log(single.name + "/" + single.age)

    function getName(name) {
        console.log("getName:" + name)
    }

</script>
</html>